<style>
    .menu-opt-icon{ font-size: 16px;}
    .menu-opt-icon:hover{color: #007DDB;}
    .gridtable {
        color:#333333;
        border: none;
        width:100%;
    }
    .gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #e9e9e9;
        background-color: #ffffff;
    }
</style>
<div class="layui-card">
    <div class="layui-card-body" id="body-content-header" style="padding-bottom: 0px; margin: 0px;">
        <fieldset id="content-header-title" class="layui-elem-field layui-field-title" style="margin: 0px 0px 6px 0px;">
            <legend><a href="#!console">首页</a> / <span style="color: darkgreen;">{{title}}</span></legend>
        </fieldset>
        <form id="content-header-query-form" class="layui-form layui-form-pane" style="margin-bottom: 0px;"></form>
    </div>
    <div class="layui-card-body">
        <div class="layui-row">
            <div class="layui-col-xs4 layui-col-md2">
                <div class="layui-card">
                    <table class="layui-hide" id="sys_auth_module_table" lay-filter="sys_auth_module_table"></table>
                </div>
            </div>
            <div class="layui-col-xs8 layui-col-md10">
                <div class="layui-card" style="padding: 0px 5px;" id="sys_menu_table">
                    <h2 p-if="{{count}}==0">
                        <div class="layui-form layui-table-view" style="padding: 20px; text-align: center;">暂无数据</div>
                    </h2>
                    <div p-if="{{count}}>0" style="height: calc(100vh - 190px); overflow-x: hidden; overflow-y: auto;">
                        <div class="layui-form layui-table-view" p-each="data">
                            <div class="layui-card" style="margin-bottom:0px;">
                                <div class="layui-card-header" style="background: #e6e6e6;">
                                    <i p-bind="class:layui-icon {{icon}}"></i>&nbsp;&nbsp;
                                    <span>{{name}}</span> |
                                    <span style="color:red;">{{orderNumber}}</span>
                                    <i class="layui-icon menu-opt-icon" p-bind="data-id:{{id}}" onclick="opt.sub.delete(this)" style="float: right;">&#xe640;</i>&nbsp;&nbsp;
                                    <i class="layui-icon menu-opt-icon" p-bind="data-id:{{id}}" onclick="opt.sub.update(this)" style="float: right;">&#xe631;</i>&nbsp;&nbsp;
                                    <i class="layui-icon menu-opt-icon" p-bind="data-id:{{id}}" onclick="opt.sub.add(this)" style="float: right;">&#xe654;</i>&nbsp;
                                </div>
                                <div class="layui-card-body" style="padding: 0px;">
                                    <div p-if="{{count}}>0">
                                        <table class="gridtable" p-each="sub">
                                            <tr>
                                                <td style="width: 120px;">{{name}}</td>
                                                <td style="width: 120px;">{{url}}</td>
                                                <td>{{path}}</td>
                                                <td style="width: 50px;text-align: center;">{{orderNumber}}</td>
                                                <td style="width: 80px;text-align: center;">
                                                    <i class="layui-icon menu-opt-icon" p-bind="data-id:{{id}}^data-parent:{{parentId}}" onclick="opt.permission.add(this)">&#xe857;</i>&nbsp;&nbsp;
                                                    <i class="layui-icon menu-opt-icon" p-bind="data-id:{{id}}^data-parent:{{parentId}}" onclick="opt.menu.update(this)">&#xe631;</i>&nbsp;&nbsp;
                                                    <i class="layui-icon menu-opt-icon" p-bind="data-id:{{id}}^data-parent:{{parentId}}" onclick="opt.menu.delete(this)">&#xe640;</i>&nbsp;
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right"></td>
                                                <td colspan="5" p-bind="id:permission-{{id}}">
                                                    <div p-each="permission">
                                                        <span p-if="{{type}}==1">
                                                            <button class="layui-btn layui-btn-normal" style="margin-top: 3px; margin-left: 0px; margin-right: 2px;">
                                                                <span p-bind="data-id:{{id}}^data-parent:{{parentId}}" onclick="opt.permission.update(this);">{{name}}</span>
                                                                <span p-bind="data-id:{{id}}^data-parent:{{parentId}}" onclick="opt.permission.delete(this);" class="layui-badge layui-bg-gray">X</span>
                                                            </button>
                                                        </span>
                                                        <span p-if="{{type}}==2">
                                                            <button class="layui-btn layui-btn-warm" style="margin-top: 3px; margin-left: 0px; margin-right: 2px;">
                                                                <span p-bind="data-id:{{id}}^data-parent:{{parentId}}" onclick="opt.permission.update(this);">{{name}}</span>
                                                                <span p-bind="data-id:{{id}}^data-parent:{{parentId}}" onclick="opt.permission.delete(this);" class="layui-badge layui-bg-gray">X</span>
                                                            </button>
                                                        </span>
                                                        <span p-if="{{type}}==3">
                                                            <button class="layui-btn" style="margin-top: 3px; margin-left: 0px; margin-right: 2px;">
                                                                <span p-bind="data-id:{{id}}^data-parent:{{parentId}}" onclick="opt.permission.update(this);">{{name}}</span>
                                                                <span p-bind="data-id:{{id}}^data-parent:{{parentId}}" onclick="opt.permission.delete(this);" class="layui-badge layui-bg-gray">X</span>
                                                            </button>
                                                        </span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/controller/system/auth.js"></script>
